<template>
  <div class="login-container">
    <height/>
    <height/>
    <height/>
    <height/>
    <header>
      <el-image
        style="width: 100%; height: 80px"
        :src="require(`@/assets/images/title.png`)"
        fit="contain"
      ></el-image>
    </header>
    <div class="center image_title">食品安全齐监督,健康生活同构筑</div>
    <section>
      <div>
        <el-image
          style="width: 100%; height: 400px"
          :src="require(`@/assets/images/login-logo.png`)"
          fit="contain"
        ></el-image>
      </div>
      <div class="login_wapper">
        <div class="title center">欢迎登录</div>
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
          <height :height="30" />
          <el-form-item prop="account">
            <el-input
              v-model="loginForm.account"
              placeholder="输入您的账号"
              :maxLength="11"
           >
             <i slot="prefix" class="el-input__icon el-icon-user"></i>
            </el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="loginForm.password"
              placeholder="输入您的密码"
              :maxLength="11"
            >
  <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
            
          </el-form-item>

          <el-row :gutter="20">
            <el-col :span="16">
              <el-form-item prop="captha">
                <el-input
                  v-model="loginForm.captha"
                  placeholder="输入验证码"
                  :maxLength="4"
               >
  <i slot="prefix" class="iconfont icon-yanzhengyanzhengma"></i>
            </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-image
                style="
                  width: 100%;
                  height: 33px;
                  cursor: pointer;
                "
                :src="YZMImg"
                @click="generate"
              ></el-image>
            </el-col> </el-row
          ><height :height="10" />
          <el-form-item>
            <el-button
              :loading="loading"
              type="primary"
              round
              style="width: 100%"
              @click.native.prevent="handleLogin"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </section>
    <footer class="center">
      Copyight@ 2023-2033 苏州亿通网络科技有限公司 All Rights Reserved
    </footer>

    <!-- <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
      auto-complete="on"
      label-position="left"
    >
      <div class="title-container">
        <h3 class="title">
          {{ $t("login.title") }}
        </h3>
      </div>

      <el-form-item prop=" phone">
        <span class="svg-container">
          <svg-icon icon-class="user" />
        </span>
        <el-input
          v-model="loginForm.phone"
          :placeholder="$t('login.username')"
          name=" phone"
          type="text"
          auto-complete="on"
        />
      </el-form-item>

      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input
          v-model="loginForm.password"
          :type="passwordType"
          :placeholder="$t('login.password')"
          name="password"
          auto-complete="on"
          @keyup.enter.native="handleLogin"
        />
        <span class="show-pwd" @click="showPwd">
          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
        </span>
      </el-form-item>

      <el-button
        :loading="loading"
        type="primary"
        style="width: 100%; margin-bottom: 30px"
        @click.native.prevent="handleLogin"
      >
        {{ $t("login.logIn") }}
      </el-button>
    </el-form> -->
  </div>
</template>

<script>
import { validUsername } from "@/utils/validate";
import LangSelect from "@/components/LangSelect";
import Particles from "@/components/Particles/index";
import { generate } from "@/api/modules/login";

let id=new Date().getTime()
export default {
  name: "Login",
  components: { LangSelect, Particles },
  data() {
    // const validateUsername = (rule, value, callback) => {
    //   if (!validUsername(value)) {
    //     callback(new Error("Please enter the correct user name"));
    //   } else {
    //     callback();
    //   }
    // };
    // const validatePassword = (rule, value, callback) => {
    //   if (value.length < 6) {
    //     callback(new Error("The password can not be less than 6 digits"));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      // 本地账号：市局 admin 区局 yt 分局 yt2 密码：Szyt2021
      loginForm: {
        account: "admin",
        captha: "",
        password: "Szsc@220455",
        id:id
      },
      loginRules: {
        account: [
          {
            required: true,
            trigger: "blur",
            message: "输入您的账号",
          },
        ],
        password: [
          { required: true, trigger: "blur", message: "输入您的密码" },
        ],
        captha: [{ required: true, trigger: "blur", message: "输入验证码" }],
      },
      YZMImg: "",
      loading: false,
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  created() {
    // localStorage.setItem(
    //   "userInfo",
    //   JSON.stringify({
    //     account: "szscjxk",
    //     areaCode: "320500",
    //     areaName: "苏州市",
    //     id: "4",
    //     imgUrl: null,
    //     lawenforcementId: "464645",
    //     loginName: "市局管理员",
    //     loginRef: "3",
    //     loginRefId: "4",
    //     parentId: "0",
    //     password: "6bb7102c7de7b3c0cf79441935828e33",
    //     permission: 1,
    //     syjmhId: null,
    //     unitCode: "320500",
    //     unitId: "100",
    //     unitName: "苏州市市场监督管理局",
    //     userId: "4",
    //   })
    // );

    this.generate();
  },
  mounted() {},
  destroyed() {},
  methods: {
    async generate() {
      let res = await generate({
    id:id
      });
      this.YZMImg =
        "data:image/png;base64," +
        btoa(
          new Uint8Array(res).reduce(
            (data, byte) => data + String.fromCharCode(byte),
            ""
          )
        );
    },

    // showPwd() {
    //   if (this.passwordType === "password") {
    //     this.passwordType = "";
    //   } else {
    //     this.passwordType = "password";
    //   }
    // },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("LoginByUsername", this.loginForm)
            .then(() => {
              this.loading = false;
              this.$router
                .push({ path: this.redirect || "/" })
                // .push({ path: '/Jump' })
                .then((res) => {
                  console.log(res);
                })
                .catch((res) => {
                });
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          //   console.log('error submit!!')
          return false;
        }
      });
    },
  },
};
</script>


  <style lang="scss">
.login-container {
  height: 100%;
  background: url("~@/assets/images/bg.jpg") center center no-repeat;
  display: flex;
  flex-direction: column;
  .image_title{
    color: white;
    font-size: 24px;
  }
  header {
    height: 100px;
    display: flex;
    align-items: center;
  }
  section {
    flex: 1;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .login_wapper {
      width: 400px;
      height: 350px;
      background-color: #fff;
      border-radius: 20px;
      padding: 30px;
      .title {
        font-size: 18px;
      }
      
    }
    .icon-yanzhengyanzhengma{
      font-size: 14px;
      margin-left: 5px;
    }
  }
  footer {
    height: 80px;
    color: white;
    line-height: 80px;
  }
}
</style>
















 <style rel="stylesheet/scss" lang="scss">
// /* 修复input 背景不协调 和光标变色 */
// /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

// $bg: #283443;
// $light_gray: #eee;
// $cursor: #fff;

// @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
//   .login-container .el-input input {
//     color: $cursor;
//     &::first-line {
//       color: $light_gray;
//     }
//   }
// }

// /* reset element-ui css */
// .login-container {
//   .el-input {
//     display: inline-block;
//     height: 47px;
//     width: 85%;
//     input {
//       background: transparent;
//       border: 0px;
//       -webkit-appearance: none;
//       border-radius: 0px;
//       padding: 12px 5px 12px 15px;
//       color: $light_gray;
//       height: 47px;
//       caret-color: $cursor;
//       &:-webkit-autofill {
//         -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
//         -webkit-text-fill-color: $cursor !important;
//       }
//     }
//   }
//   .el-form-item {
//     border: 1px solid rgba(255, 255, 255, 0.1);
//     background: rgba(0, 0, 0, 0.1);
//     border-radius: 5px;
//     color: #454545;
//   }
// }
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
// // $bg:#2d3a4b;
// $bg: transparent;
// $dark_gray: #889aa4;
// $light_gray: #eee;
// .login-container {
//   min-height: 100%;
//   width: 100%;
//   background-color: $dark_gray;
//   overflow: hidden;
//    background: url('~@/assets/images/bg.jpg') center center no-repeat;
//   .login-form {
//     position: relative;
//     width: 520px;
//     max-width: 100%;
//     padding: 160px 35px 0;
//     margin: 0 auto;
//     overflow: hidden;
//   }
//   .tips {
//     font-size: 14px;
//     color: #fff;
//     margin-bottom: 10px;
//     span {
//       &:first-of-type {
//         margin-right: 16px;
//       }
//     }
//   }
//   .svg-container {
//     padding: 6px 5px 6px 15px;
//     color: $dark_gray;
//     vertical-align: middle;
//     width: 30px;
//     display: inline-block;
//   }
//   .title-container {
//     position: relative;
//     .title {
//       font-size: 26px;
//       color: $light_gray;
//       margin: 0px auto 40px auto;
//       text-align: center;
//       font-weight: bold;
//     }
//     .set-language {
//       color: #fff;
//       position: absolute;
//       top: 3px;
//       font-size: 18px;
//       right: 0px;
//       cursor: pointer;
//     }
//   }
//   .show-pwd {
//     position: absolute;
//     right: 10px;
//     top: 7px;
//     font-size: 16px;
//     color: $dark_gray;
//     cursor: pointer;
//     user-select: none;
//   }
// }
</style>
